<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Setup | Chatvia Laravel Chat App Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      content="Chatvia Laravel is a simple and beautiful Chat App Template documentation"
      name="description"
    />
    <meta content="AnonSecTeamInc" name="author" />
    <meta
      name="keywords"
      content="Chatvia Laravel Chat App documentation, Chatvia Laravel documentation"
    />
    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico" />

    <!-- Bootstrap Css -->
    <link
      href="assets/css/bootstrap.min.css"
      id="bootstrap-style"
      rel="stylesheet"
      type="text/css"
    />
    <!-- Icons Css -->
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <!-- App Css-->
    <link
      href="assets/css/app.min.css"
      id="app-style"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body
    data-topbar="dark"
    data-spy="scroll"
    data-target=".right-side-nav"
    data-offset="175"
  >
    <!-- Begin page -->
    <div id="layout-wrapper">
      <header id="page-topbar">
          <div class="navbar-header">
              <div class="d-flex">
                  <!-- LOGO -->
                  <div class="navbar-brand-box">
                      <a href="index.html" class="logo logo-light">
                          <span class="logo-sm">
                              <img src="assets/images/logo-sm.svg" alt="" height="25">
                          </span>
                          <span class="logo-lg">
                              <img src="assets/images/logo-light.png" alt="" height="20">
                          </span>
                      </a>
                  </div>

                  <button type="button" class="btn btn-sm px-3 font-size-24 header-item waves-effect d-lg-none" id="vertical-menu-btn">
                      <i class="mdi mdi-menu"></i>
                  </button>
              </div>

              <div class="d-flex">
                  <div class="d-none d-md-inline-block">
                      <a href="https://chatvia-laravel.themesbrand.website/" target="_blank" class="header-item">Live Demo</a>
                  </div>
                  <div class="d-none d-md-inline-block">
                      <a href="https://docs.google.com/forms/d/e/1FAIpQLSfiP9bDHzIQdQoMXFrYvJx00wyFzSu_cqBWP0N0uUHpqjrbzQ/viewform" target="_blank" class="header-item">Need Customization?</a>
                  </div>
                  <div class="d-inline-block">
                      <h5 class="header-item m-0"><span class="badge badge-danger">v1.0.1</span></h5>
                  </div>
            
              </div>
          </div>
      </header> <!-- ========== Left Sidebar Start ========== -->
<div class="vertical-menu">

    <div data-simplebar class="h-100">

        <!--- Sidemenu -->
        <div id="sidebar-menu">
            <!-- Left Menu Start -->
            <ul class="metismenu list-unstyled" id="side-menu">
                <li class="menu-title">Docs</li>

                <li>
                    <a href="index.html" class="waves-effect">
                        <i class="mdi mdi-text-box-outline"></i>
                        <span>Introduction</span>
                    </a>
                </li>

                <li>
                    <a href="setup.html" class=" waves-effect">
                        <i class="mdi mdi-cog-outline"></i>
                        <span>Setup</span>
                    </a>
                </li> 

                <li class="menu-title">Themes</li>

                <li>
                    <a href="light.html" class=" waves-effect">
                        <i class="mdi mdi-white-balance-sunny"></i>
                        <span>Light Version</span>
                    </a>
                </li>
                
                <li>
                    <a href="dark.html" class=" waves-effect">
                        <i class="mdi mdi-weather-night"></i>
                        <span>Dark Version</span>
                    </a>
                </li> 

                <li class="menu-title">Other</li>

                <li>
                    <a href="changelog.html" class=" waves-effect">
                        <i class="mdi mdi-format-list-bulleted"></i>
                        <span>Changelog</span>
                    </a>
                </li>

            </ul>
        </div>
        <!-- Sidebar -->
    </div>
</div>
<!-- Left Sidebar End -->

      <!-- ============================================================== -->
      <!-- Start right Content here -->
      <!-- ============================================================== -->
      <div class="main-content">
        <div class="page-content">
          <div class="container-fluid">
            <div class="row">
              <div class="col-lg-12">
                <div class="card">
                  <div class="card-body">
                    <div class="p-lg-1">
                      <div class="d-xl-flex">
                        <div class="w-100">
                          <h4 class="mt-0 mb-4">Setup Laravel</h4>

                          <div id="desc" class="mb-5">
                            <h5 class="mt-4">Introduction</h5>
                            <p>
                              Chatvia is built with <b>Laravel 8</b> and pusher
                              with developer friendly code. You can simply
                              change the layouts and mode using this template.
                              We have managed the chat with <b>PUSHER</b> APP
                              with all details of chat, image, emojis and files.
                            </p>
                          </div>

                          <div id="video" class="mb-5">
                            <h5 class="mt-4">Setup/Installation Video</h5>
                            <p>
                              <a href="https://vimeo.com/554605164" target="_blank">https://vimeo.com/554605164</a>
                            </p>

                            <iframe
                              src="https://player.vimeo.com/video/554605164"
                              width="640"
                              height="360"
                              frameborder="0"
                              allow="autoplay; fullscreen; picture-in-picture"
                              allowfullscreen
                            ></iframe>
                          </div>

                          <div id="prerequisites" class="mb-5">
                            <h5 class="mt-4">Prerequisites</h5>

                            <p>
                              Please follow below steps to install and setup all
                              prerequisites:
                            </p>

                            <ul>
                              <li>
                                <strong>Composer</strong>
                                <p>
                                  Make sure to have the
                                  <a
                                    href="https://getcomposer.org/"
                                    target="_blank"
                                    >Composer</a
                                  >
                                  installed &amp; running in your computer.
                                </p>
                              </li>

                              <li>
                                <strong>Git</strong>

                                <p>
                                  Make sure to have the
                                  <a href="https://git-scm.com/" target="_blank"
                                    >Git</a
                                  >
                                  installed globally &amp; running on your
                                  computer. If you already have installed git on
                                  your computer, you can skip this step.
                                </p>
                              </li>
                            </ul>
                          </div>

                          <div id="installation">
                            <h5 class="mt-4">Installation</h5>

                            <p>
                              To setup the Chat App, follow below-mentioned
                              steps:
                            </p>

                            <ul>
                              <li>
                                <strong>Install Prerequisites</strong>
                                <p>
                                  Make sure to have all above prerequisites
                                  installed &amp; running on your computer.
                                </p>
                              </li>
                            </ul>

                            <p class="mt-4">
                              After you finished with the above steps, you can
                              run the following commands to run the project
                              locally or build for production use:
                            </p>
                            <table class="table table-bordered m-0">
                              <thead>
                                <tr>
                                  <th style="width: 20%">
                                    <i class="ti-file"></i> Command
                                  </th>
                                  <th>Description</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr>
                                  <td>
                                    <code>composer install</code>
                                  </td>
                                  <td>
                                    command to install all of the framework's
                                    dependencies.
                                  </td>
                                </tr>
                                <tr>
                                  <td colspan="2">
                                    <strong>
                                      Please run the below command to generate
                                      the new APP_KEY.
                                    </strong>
                                    <div class="custom-pre">
                                      php artisan key:generate
                                    </div>
                                    <strong>
                                      Please fill your DB credentials in the
                                      <code>.env</code> file.
                                    </strong>
                                    <div class="custom-pre">
                                      DB_CONNECTION=mysql<br />
                                      DB_HOST=127.0.0.1<br />
                                      DB_PORT=3306<br />
                                      DB_DATABASE=chatvia<br />
                                      DB_USERNAME=root<br />
                                      DB_PASSWORD=
                                    </div>
                                    <strong>
                                      Please fill your PUSHER APP credentials in
                                      the <code>.env</code> file.
                                    </strong>
                                    <div class="custom-pre">
                                      PUSHER_APP_ID={ADD_YOUR_APP_ID}<br />
                                      PUSHER_APP_KEY={ADD_YOUR_APP_KEY}<br />
                                      PUSHER_APP_SECRET={ADD_YOUR_APP_SECRET}<br />
                                      PUSHER_APP_CLUSTER={ADD_YOUR_APP_CLUSTER}
                                    </div>
                                    <strong>
                                      Please fill your PUSHER APP KEY in the
                                      <code>public/js/custom.js</code> file. You
                                      can create PUSHER APP KEY from this link
                                      <a
                                        href="https://pusher.com/"
                                        target="_blank"
                                        >https://pusher.com</a
                                      >.
                                    </strong>
                                    <div class="custom-pre">
                                      var pusher = new
                                      Pusher('{ADD_YOUR_PUSHER_APP_KEY}', {
                                      cluster: 'ap2', forceTLS: true });
                                    </div>
                                  </td>
                                </tr>
                                <tr>
                                  <td colspan="2">
                                    <strong>
                                      Please run the following commands to clear
                                      all cache from the project.
                                    </strong>
                                    <div class="custom-pre">
                                      php artisan optimize
                                    </div>
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                    <code
                                      >php artisan migrate:fresh</code
                                    >
                                  </td>
                                  <td>
                                    This will migrate the database tables. For
                                    more details visit
                                    <a
                                      href="https://laravel.com/docs/8.x/migrations"
                                      target="_blank"
                                      >https://laravel.com/docs/8.x/migrations
                                    </a>
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                    <code
                                      >php artisan db:seed</code
                                    >
                                  </td>
                                  <td>
                                    This will insert the database tables data. For
                                    more details visit
                                    <a
                                      href="https://laravel.com/docs/8.x/seeding"
                                      target="_blank"
                                      >https://laravel.com/docs/8.x/seeding
                                    </a>
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                    <code>php artisan serve</code>
                                  </td>
                                  <td>
                                    The development server is accessible at
                                    <a href="http://localhost:8000"
                                      >http://localhost:8000</a
                                    >. <br />
                                    To run on other port just run command : php
                                    artisan serve --port=8001
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>

                          <div id="tips">
                            <h5 class="mt-4">Tips</h5>
                            <p>
                              Make sure to provide www-data user permissions to
                              storage folder if you are using Linux server.
                            </p>
                          </div>
                        </div>

                        <!-- Start right-side-nav -->
                        <div class="d-none d-xl-block">
                          <div class="right-side-nav">
                            <ul class="nav nav-pills flex-column">
                              <li class="nav-item">
                                <a href="#desc" class="nav-link">Description</a>
                              </li>
                              <li class="nav-item">
                                <a href="#video" class="nav-link">Setup Video</a>
                              </li>
                              <li class="nav-item">
                                <a href="#prerequisites" class="nav-link"
                                  >Prerequisites</a
                                >
                              </li>
                              <li class="nav-item">
                                <a href="#installation" class="nav-link"
                                  >Installation</a
                                >
                              </li>
                              <li class="nav-item">
                                <a href="#tips" class="nav-link">Tips</a>
                              </li>
                            </ul>
                          </div>
                        </div>

                        <!-- End right-side-nav -->
                      </div>
                    </div>
                    <!-- end padding-->
                  </div>
                  <!-- end card-body-->
                </div>
                <!-- end card-->
              </div>
            </div>
            <!-- end row -->
          </div>
          <!-- container-fluid -->
        </div>
        <!-- End Page-content -->

        <footer class="footer">
          <div class="container-fluid">
            <div class="row">
              <div class="col-sm-6">
                <script>
                  document.write(new Date().getFullYear());
                </script>
                © AnonSecTeamInc.
              </div>
              <div class="col-sm-6">
                <div class="text-sm-right d-none d-sm-block">
                  Crafted with <i class="mdi mdi-heart text-danger"></i> by
                  <a
                    href="/"
                    target="_blank"
                    class="text-muted"
                    >AnonSecTeamInc</a
                  >
                </div>
              </div>
            </div>
          </div>
        </footer>
      </div>
      <!-- end main content-->
    </div>
    <!-- END layout-wrapper -->

    <!-- JAVASCRIPT -->
    <script src="assets/libs/jquery/jquery.min.js"></script>
    <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/libs/simplebar/simplebar.min.js"></script>
    <script src="assets/libs/jquery.easing/jquery.easing.min.js"></script>

    <script src="assets/js/app.js"></script>
  </body>
</html>
